﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     #main{
	   width:800px;
	   border:solid 1px red;
	   margin:auto;
	 }
	 h2{
	   text-align:center;
	 }
     table{
	   width:100%;
	 }
     #td_1{
	   width:5%;
	 }
	 td{
	   border:solid 1px black;
	   text-align:center;
	 }
  </style>
 </head>
 <body>
   <div id="main">
      <h2>商品管理表</h2>
	  <table>
	     <tr>
		    <td id="td_1">删除</td>
			<td>商品名</td>
			<td>价格</td>
			<td>数量</td>
			<td>总价</td>
		 </tr>
	  </table>
	  <div>
	   商品名：<input type="text" id="name">
	   价格：<input type="text" id="jiage">
	   数量：<input type="text" id="number">
	   <button id="btn_create">增加</button>
	   <button id="btn_delete">删除</button>
	  </div>
   </div>
 </body>
 <script>
   var table = document.getElementsByTagName("table")[0];
   var btn_create = document.getElementById("btn_create");
   var btn_delete = document.getElementById("btn_delete");
    
   var nameContent = "";
   var jiageContent = "";
   var numberContent = "";

   btn_create.onclick = function(){
	    
	   var bool = panduan();

	   if(bool == true){

       var tr = document.createElement("tr");
	    
	   createTableTr(tr);
      
	   table.appendChild(tr);

	   }
   }
   
   function createTableTr(tr){
      var td_1 = document.createElement("td");
	  var checkBox = document.createElement("input");

	  checkBox.setAttribute("type","checkBox");
	  checkBox.setAttribute("class","createBox");

	  var td_2 = document.createElement("td");
	  var td_3 = document.createElement("td");
	  var td_4 = document.createElement("td");
	  var td_5 = document.createElement("td");

      tableContent(td_2,td_3,td_4,td_5);

      td_1.appendChild(checkBox);
	  tr.appendChild(td_1);
	  tr.appendChild(td_2);
	  tr.appendChild(td_3);
	  tr.appendChild(td_4);
	  tr.appendChild(td_5);
   }
   
   function tableContent(td_2,td_3,td_4,td_5){
      td_2.innerText = nameContent;
	  td_3.innerText = jiageContent;
	  td_4.innerText = numberContent;
	  td_5.innerText = jiageContent * numberContent;
	 
   }

   function panduan(){
	  var name = document.getElementById("name");
      var jiage = document.getElementById("jiage");
      var number = document.getElementById("number");

	  nameContent = name.value;
	  jiageContent = jiage.value;
	  numberContent = number.value;
       
      if(nameContent == ""){
	   window.alert("商品名不能为空！");
	   return false;
	 }else if(jiageContent == ""){
	   window.alert("商品价格不能为空！");
	   return false;
	 }else if(numberContent == ""){
	   window.alert("商品数量不能为空！");
	   return false;
	 }else{
	   return true;
	 }
   }
    
   btn_delete.onclick = function(){
      var check_boxs = document.getElementsByClassName("createBox");
      var check_boxs_length = check_boxs.length;
	for(var i = 0;i < check_boxs_length;i++){
	    
	   var checkLength = check_boxs.length;
	   for(var j = 0;j < checkLength;j++){
	     if(check_boxs[j].checked == true){
	        check_boxs[j].parentNode.parentNode.remove();
			break;
	     }
	  }
	}
   }
 </script>
</html>
